<template>
  <view class="login-container">
    <view class="login-title">迪尔化工填料</view>
    <view class="login-form">
      <u-form :model="form" ref="uForm">
        <u-form-item label="账号" prop="account">
          <u-input
            v-model="form.account"
            placeholder="请输入账号"
            border="bottom"
          ></u-input>
        </u-form-item>
        <u-form-item label="密码" prop="password">
          <u-input
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
            border="bottom"
          ></u-input>
        </u-form-item>
      </u-form>

      <u-form-item label="分类" prop="category">
        <u-input
          v-model="selectedCateName"
          placeholder="请选择分类"
          border="bottom"
          readonly
          suffixIcon="arrow-down"
          @click="showCateSelect = true; console.log('u-input clicked, showCateSelect:', showCateSelect)"
        ></u-input>
      </u-form-item>

      <up-select
        :show="showCateSelect"
        v-model="cateId"
        :options="cateList"
        keyName="name"
        valueName="id"
        @confirm="selectItem"
        @close="showCateSelect = false; console.log('up-select closed, showCateSelect:', showCateSelect)"
      ></up-select>

      <view class="login-btn">
        <u-button type="primary" text="登录" @click="handleLogin"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { login } from '@/api/login'
import CryptoJS from 'crypto-js'

const form = reactive({
  account: '',
  password: ''
})

// 响应式数据  
const cateId = ref('1') 
const selectedCateName = ref('分类1'); // 用于显示选中的分类名称
const showCateSelect = ref(false); // 控制 up-select 的显示隐藏

const cateList = ref([
    {
        id: '1',
        name: '分类1'
    },
    {
        id: '2',
        name: '分类2'
    },
    {
        id: '3',
        name: '分类4'
    },
])
  
// 方法  
const selectItem = (e: any) => {  
  console.log('up-select confirmed, selected:', e.value);
  const selected = e.value[0];
  cateId.value = selected.id;
  selectedCateName.value = selected.name;
  showCateSelect.value = false; // 选中后隐藏选择器
};

const handleLogin = async () => {
  if (!form.account || !form.password) {
    uni.showToast({
      title: '请输入账号和密码',
      icon: 'none'
    })
    return
  }

  try {
    const response = await login({
      account: form.account,
      password: CryptoJS.MD5(form.password).toString(),
    })

    if (response.code === 0) {
      const { Token, UserInfo } = response.data
      uni.setStorageSync('token', Token)
      uni.setStorageSync('userInfo', UserInfo)

      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000,
      })

      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/home/index',
        })
      }, 2000)
    } else {
      uni.showToast({
        title: response.msg || '登录失败',
        icon: 'none',
      })
    }
  } catch (error) {
    console.error('登录请求失败:', error)
    uni.showToast({
      title: '网络错误，请稍后再试',
      icon: 'none',
    })
  }
}
</script>

<style lang="scss">
.login-container {
  min-height: 100vh;
  background-image: url('@/assets/imgs/login_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 40rpx;
  
  .login-form {
    background-color: #fff;
    border-radius: 12rpx;
    padding: 40rpx;
    margin-top: 100rpx;
  }
  
  .login-btn {
    margin-top: 60rpx;

    .u-button {
      background-image: linear-gradient(to right, #00C6FF 0%, #0072FF 100%);
      border-radius: 50rpx;
      box-shadow: 0 10rpx 20rpx rgba(0, 114, 255, 0.2);
      color: #fff;
      font-size: 36rpx;
      height: 90rpx;
    }
  }

  .login-title {
    font-size: 48rpx;
    color: #008761;
    text-align: center;
    margin-bottom: 80rpx;
    padding-top: 200rpx;
  }
}
</style> 